<template>
    <div class="form-container">
        <h2>Enter your information</h2>
        <label for="name">Name:{{ a.name }}</label>
        <input type="text" id="name" v-model="a.name">

        <label for="age">Age:{{ a.age }}</label>
        <input type="number" id="age" v-model="a.age">

        <p>Your name is {{ a.name }} and you are {{ a.age }} years old.</p>
    </div>
</template>

<script setup lang='ts'>
import { reactive } from 'vue';


interface IUser {
    name: string,
    age: number
}

const a = reactive<IUser>({
    name: '崔梦娇', age: 123
})




</script>

<style>
.form-container {
    margin: 20px;
}

input {
    display: block;
    margin: 10px 0;
    padding: 5px;
}

label {
    font-weight: bold;
}

p {
    margin-top: 20px;
    font-size: 1.2em;
}
</style>